<template>
	<view class="gameContainer">
		<view class="siuuuuu"></view>
		<view class="input-group">
			<view class="text-item">赛事名称：</view>
			<uni-easyinput v-model="name" placeholder="请输入赛事名称" @input="onEvent"></uni-easyinput>
		</view>

		<view class="fieldContainer">
			<view class="fieldChoose">
				<view class="text-item">选择场地：</view>
				<uni-data-select v-model="fieldID" :localdata="range1" @change="change1"></uni-data-select>
			</view>
		</view>

		<view class="timeContainer">
			<view class="timeChoose">
				<view class="text-item">时间：</view>
				<picker mode="date" :value="selectedDate" start="2000-01-01" end="2030-12-31"
					@change="handleDateChange">
					<view class="picker-label">{{ selectedDate }}</view>
				</picker>
			</view>
		</view>

		<view class="ruleContainer">
			<view class="ruleChoose">
				<view class="text-item">选择赛制：</view>
				<uni-data-select v-model="rule" :localdata="range2" @change="change2"></uni-data-select>
			</view>
		</view>

<!-- 		<view class="seenContainer">
			<view class="seenChoose">
				<view class="text-item">是否公开：</view>
				<uni-data-select v-model="value3" :localdata="range3" @change="handleChange"></uni-data-select>
			</view>
		</view> -->
		<view class="descriptionContainer">
			<view class="input-group">
				<view class="text-item">赛事说明：</view>
				<uni-easyinput v-model="description" placeholder="请输入关于赛事的备注" @input="onEvent"></uni-easyinput>
			</view>
		</view>
		<view>
			<button class="button" type="primary" @click="onClick">创建</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRouter
	} from 'vue-router';
	import {
		baseUrl
	} from '../../tool/tool';
	const name = ref("");
	const description = ref("");

	function onEvent() {
		// 事件处理逻辑
	}

	const fieldID = ref();
	const range1 = ref([{
			value: 0,
			text: "信息学部操场"
		},
		{
			value: 1,
			text: "桂园操场"
		},
		{
			value: 2,
			text: "九一二操场"
		},
		{
			value: 3,
			text: "工学部田径场"
		},
	]);

	const change1 = (e) => {
		console.log("Selected value:", fieldID.value);
	};

	const rule = ref();
	const range2 = ref([{
			value: 0,
			text: "5人"
		},
		{
			value: 1,
			text: "7人"
		},
		{
			value: 2,
			text: "11人"
		},
	]);
	const app = getApp();
	const value3 = ref();
	const range3 = ref([{
			value: 0,
			text: "公开"
		},
		{
			value: 1,
			text: "私有"
		},
	]);

	const selectedDate = ref('2023-01-01');

	const handleDateChange = (e) => {
		selectedDate.value = e.detail.value;
		console.log(selectedDate.value);
	};

	const change2 = (e) => {
		console.log("Selected value:", rule.value);
	};

	const handleChange = (e) => {
		console.log("Selected value:", value3.value);
	};
	const router = useRouter();
	let mystate = ref()
	let myrule = ref()
	function onClick() {
		switch(value3.value){
			case 0:
				mystate.value="私有";
				break;
			case 1:
				mystate.value="公开";
				break;
		}
		switch(rule.value){
			case 0:
				myrule.value=5;
				break;
			case 1:
				myrule.value=7;
				break;
			case 2:
				myrule.value=11;
				break;
		}
		uni.request({
			url: baseUrl + "/SeriesGame/addSeriesGame",
			method: "POST",
			data: {
				seriesID:"",
				name: name.value,
				fieldID: fieldID.value,//fieldID.value,
				personNum:"",
				initiaorAccount:app.globalData.account,
				competitionSystem:myrule.value,//range2.value, //赛制
				createDate:"",
				logPath:"",
				description: description.value,  //描述
				state:mystate.value,
				selectedDate: selectedDate.value ,//开始时间
			},
			success(res) {
				
			}
		
		})
		uni.navigateTo({
			url: `/pages/success/success?name=${name.value}&fieldID=${range1.value[fieldID.value].text}&rule=${range2.value[rule.value].text}
		&date=${selectedDate.value}&description=${description.value}`
		})
		// const urlParams ={
		// 	name:name.value,
		// 	fieldID:range1.value[fieldID.value].text,
		// 	rule:range2.value[rule.value].text,
		// 	value3:range3.value[value3.value].text,
		// 	date:selectedDate.value
		// };
		// router.push({
		// 	path:'/pages/success/success',
		// 	query:urlParams
		// });
	}
</script>


<style lang="scss" scoped>
	.gameContainer {
		padding: 30rpx;
		height: 60rpx;
	}
	.siuuuuu {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: linear-gradient( #BBE5FD 0%, #D2DAFD 49%, #fff 100%);
			z-index: -1;
		}

	.input-group {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		/* 如果你想让文本和输入框之间有一定的间距，可以添加margin到text-item或input-item */
	}

	.text-item1 {
		/* 文本样式，如字体大小、颜色等 */
		font-size: 20rpx;
		color: #333;
		/* 如果需要文本和输入框之间有间距，可以添加margin-right */
		margin-right: 8rpx;
	}


	.input-item {
		/* 输入框样式，根据需要调整 */
		width: 70%;
		padding: 10rpx;
		font-size: 30rpx;
		border: 1rpx solid #ccc;
		border-radius: 4rpx;
	}


	.fieldContainer {
		padding: 30rpx;
		height: 20rpx;
		margin-top: 80rpx;
	}

	.fieldChoose {
		display: flex;
		align-items: center;
	}

	.fieldchoose {
		width: 74%;
	}

	.text-item2 {
		/* 文本样式，如字体大小、颜色等 */
		font-size: 20rpx;
		color: #333;
		/* 如果需要文本和输入框之间有间距，可以添加margin-right */
		margin-right: 8rpx;
	}



	.timeContainer {
		padding: 30rpx;
		height: 90rpx;
		margin-top: 80rpx;
	}

	.timeChoose {
		padding: 30rpx;
		display: flex;
		align-items: center;
	}

	.container1 {
		padding: 10rpx;
		margin-top: 80rpx;
	}

	.text-item3 {
		/* 文本样式，如字体大小、颜色等 */
		font-size: 20rpx;
		color: #333;
		/* 如果需要文本和输入框之间有间距，可以添加margin-right */
		margin-right: 20rpx;
	}

	.picker-label {
		padding: 5rpx;
		border: 1rpx solid #ccc;
		border-radius: 5rpx;
		background-color: #fff;
		text-align: center;

	}


	.ruleContainer {
		padding: 30rpx;
		height: 50rpx;
		margin-top: 80rpx;
	}

	.ruleChoose {
		display: flex;
		align-items: center;
	}

	.rulechoose {
		width: 74%;
	}

	.text-item4 {
		/* 文本样式，如字体大小、颜色等 */
		font-size: 20rpx;
		color: #333;
		/* 如果需要文本和输入框之间有间距，可以添加margin-right */
		margin-right: 8rpx;
		margin-top: 80rpx;
	}


	.seenContainer {
		padding: 30rpx;
		height: 20rpx;
		margin-top: 80rpx;
	}

	.seenChoose {
		display: flex;
		align-items: center;
	}

	.seenchoose {
		width: 74%;
	}

	.text-item5 {
		/* 文本样式，如字体大小、颜色等 */
		font-size: 20rpx;
		color: #333;
		/* 如果需要文本和输入框之间有间距，可以添加margin-right */
		margin-right: 8rpx;
		margin-top: 80rpx;
	}

	.button {
		width: 50%;
		display: block;
		justify-content: space-between;
		align-items: center;
		margin-top: 150rpx;

		.button .text {
			display: flex;
			justify-content: center;
			/* 文本水平居中 */
			align-items: center;
			/* 文本垂直居中 */
		}
	}

	.descriptionContainer {
		padding: 30rpx;
		height: 60rpx;
		margin-top: 80rpx;
	}
</style>